import 'package:flutter/material.dart';
import 'ContentPager.dart';

class SelfNavigator extends StatefulWidget {
  @override
  _SelfNavigatorState createState() => _SelfNavigatorState();
}

class _SelfNavigatorState extends State<SelfNavigator> {
  // 设置下当前页面的默认的颜色值
  final Color _defaultColor = Colors.grey;
  final Color _activeColor = Colors.blue;
  // 设置当前的active状态下的的index索引
  int _currentIndex = 0;

  // 我们对控制器封装的类执行完返回一个实例，我们把这个实例传递到子组件中，然后一起使用
  ContentPageController onContentPageController = ContentPageController();
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 导入组件
      body: ContentPager(
        // 定义个函数，传递到子页面，它可以接受到一个从子页面传递过来的参数
        // 就相当于把子页面的数据拿到父页面执行
        // 我们拿到了页面切换后 的index索引值， 因此我们在setState函数中改变当前页面的_currentIndex，就实现了页面滑动后自动改变导航的 active 效果
        onPageChangedCallback: (int index){
          setState(() {
            _currentIndex = index;
          });
        },
        onContentPageController: onContentPageController
      ),

      // 底部导航
      bottomNavigationBar: BottomNavigationBar(
        // 图标和文字一起显示，修改默认值
        type: BottomNavigationBarType.fixed,
        // 传入 当前的active状态下的的index索引， 用它来控制页面/导航的 active状态
        currentIndex: _currentIndex,
        onTap: (int index){
          // 导航栏 item项 的点击事件
          onContentPageController.jumpToPage(index);
          setState(() {
           _currentIndex = index; 
          });
        },
        items: [
          _BottomItem(icon: Icons.home, title: '首页', index: 0),
          _BottomItem(icon: Icons.explore, title: '分享', index: 1),
          _BottomItem(icon: Icons.free_breakfast, title: '免费', index: 2),
          _BottomItem(icon: Icons.person, title: '我的', index: 3),
        ],
      ),
    );
  }

  // 这是一个函数,返回值应该是一个组件，放到我们的组件类数组当中
  // 但是 BottomNavigationBarItem 的数据类型不是widget，因此要用函数来返回，并且暂时不规定数据类型
  _BottomItem({IconData icon, String title, int index}) {

    return BottomNavigationBarItem(
      icon: Icon(icon, color: _defaultColor,),
      activeIcon: Icon(icon, color: _activeColor,),
      title: Text(title, style: TextStyle(
        color: index == _currentIndex? _activeColor : _defaultColor
      ),),
    );
  }
}



